<template>
  <el-main :style="{background: '#ebebeb'}">
    <el-row class="body-card">
      <h3>攻略管理</h3>
      <Divider/>
      <el-row :style="{margin: '20px 0'}">
        <el-button type="primary" @click="handleOpen('new')">新建</el-button>
      </el-row>
      <el-row>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="author_name"
            label="作者">
          </el-table-column>
          <el-table-column
            prop="class_tag"
            label="栏目">
				 <template slot-scope="scope">
              <span v-if="scope.row.class_tag==='inbound'">国内游</span>
              <span v-else-if="scope.row.class_tag=='abroad'">出境游</span>
              <span v-else-if="scope.row.class_tag=='shopping'">购物圣地</span>
              <span v-else-if="scope.row.class_tag=='article'">旅游文摘</span>
              <span v-else-if="scope.row.class_tag=='spot'">热门景点</span>
              <span v-else-if="scope.row.class_tag=='hotguide'">热门攻略</span> 
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleOpen('edit',scope.row.id,scope.row.title,scope.row.author_name,scope.row.class_tag,scope.row.content)">修改</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
	    <div style="padding: 20px 0;text-align: right">
           
            <el-pagination @size-change="()=>showguidelist()" @current-change="()=>showguidelist()" :current-page.sync="current" :page-size="pageSize" :total="total" background layout="prev, pager, next"> </el-pagination>
         
		 </div>
    </el-row>
  </el-main>
</template>

<script>
import {
   guideServer,
   guidelistServer
} from "../../../api/backstage";
  export default {
    name: "referenceManager",
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
      total: 0,
      pageSize: 10,
      current: 1
      };
    },
    mounted (){
      this.showguidelist();
    },
    methods: {
      handleOpen(tag, guideid,guidetitle,authornme,guidesrc,guidetext) {
        //调用接口获取内容
        this.dialogFormVisible = true;
        const suffix1= !!guideid ? `reference-${tag}/${guideid}` : `reference-${tag}`;
        const suffix2= !!guidetitle ? `/${guidetitle}` :  ``;
        const suffix3= !!authornme ? `/${authornme}` : ``;
        const suffix4= !!guidesrc ? `/${guidesrc}` : ``;
        const suffix5= !!guidetext ? `/${guidetext}` : ``;
        this.$router.push({
          path: `/backstage-manager/${suffix1}${suffix2}${suffix3}${suffix4}${suffix5}`
        });
      },
      showguidelist(){
	  console.log("asdasd");
        guidelistServer("get", {  
        params: {
		pageSize: this.pageSize,
          current: this.current
		  }
        }).then(
        suc => {
          const { code, message, data } = suc.data;
          if (code) {
         const { current, pageSize, total, list } = data;   
			if (Array.isArray(list)) {
              this.tableData = list;
              this.total = total;
              this.pageSize = pageSize;
              this.current = current;
			  }
          } else {
            this.$message({
              type: "error",
              message
            }); 
		  } 
		  },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        })
},
      handleDelete(guideid) {
        guideServer("delete", {guideid}).then((suc) => {
           })
        }
    }
  };
</script>

<style lang="less">

</style>
